<template>
  <Modal :value="visible"
         :title="dataId ? '修改' + title : '新增' + title"
         width="600"
         @on-visible-change="onChangeVisible"
         class-name="vertical-center-modal">
    <div class="modal-cont">
      <ul class="form-ul">
        <li class="form-ul-li">
          <p class="li-title"><span class="li-must">*</span>企业名称：</p>
          <Input v-model="name"
                 placeholder="企业名称"></Input>
        </li>
        <li class="form-ul-li">
          <p class="li-title"><span class="li-must">*</span>企业地址：</p>
          <Input v-model="site"
                 placeholder="企业地址"></Input>
        </li>
        <li class="form-ul-li">
          <p class="li-title"><span class="li-must">*</span>服务类型：</p>
          <Select v-model="serveType"
                  placeholder="服务类型">
            <Option :value="item.value"
                    v-for="item in serveTypeArr"
                    :key="item.value">{{item.name}}
            </Option>
          </Select>
        </li>
        <li class="form-ul-li">
          <p class="li-title">启用状态：</p>
          <Checkbox class="form-ul-li-checkbox" v-model="status"></Checkbox>
        </li>
        <li class="form-ul-li">
          <p class="li-title"><span class="li-must">*</span>联系人：</p>
          <Input v-model="linkman"
                 placeholder="联系人"></Input>
        </li>
        <li class="form-ul-li">
          <p class="li-title"><span class="li-must">*</span>联系电话：</p>
          <Input v-model="linkphone"
                 placeholder="联系电话"></Input>
        </li>
        <li class="form-ul-li">
          <p class="li-title">备注：</p>
          <Input v-model="remark"
                 maxlength="-1"
                 :rows="3"
                 type="textarea"
                 placeholder="备注" />
        </li>
      </ul>
    </div>
    <div slot="footer">
      <Button @click.stop="onClickCancel">取消</Button>
      <Button type="primary"
              @click.stop="onClickConfirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  components: {},
  model: {
    prop: 'visible',
    event: 'onChange'
  },
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: '作业企业'
    },
    dataId: String
  },
  data () {
    return {
      name: '', // 企业名称
      site: '', // 企业地址
      serveType: '', // 服务类型
      status: true, // 启用状态
      linkman: '', // 联系人
      linkphone: '', // 联系电话
      remark: '', // 备注
      serveTypeArr: [{
        name: '车辆维修保养',
        value: 'maintain'
      }, {
        name: '总部',
        value: 'headquarters'
      }, {
        name: '加水、加油',
        value: 'addWaterOrOil'
      }, {
        name: '清运',
        value: 'clear'
      }],
    }
  },
  watch: {
    dataId (newVal) {
      newVal && this.getDetail()
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {

    },
    // 获取详情
    getDetail () {

    },
    // 点击确认
    onClickConfirm () {
      if (!this.name) return this.$Message.info('请输入企业名称');
      if (!this.site) return this.$Message.info('请选择企业地址');
      if (!this.serveType) return this.$Message.info('请选择服务类型');
      if (!this.linkman) return this.$Message.info('请输入联系人');
      if (!this.linkphone) return this.$Message.info('请输入联系电话');
    },
    // 点击取消
    onClickCancel () {
      this.$emit('onClickCancel')
      this.$emit('onChange', false)
    },
    onChangeVisible (boo) {
      if (!boo) {
        this.name = ''
        this.site = ''
        this.serveType = ''
        this.status = true
        this.linkman = ''
        this.linkphone = ''
        this.remark = ''
        this.$emit('onChange', false)
        this.$emit('update:dataId', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
